﻿
var CinemaGridRow = React.createClass({
handleClick: function() {
		$(".cinema").prop("href", "/Cinema/Index/"+this.props.item.Id);
    },
   
        render : function(){
            return (
			<div className="col-md-4 col-sm-6">
			<div className="card-container">
                <div className="card">
                        <div className="front">
                            <div className="cover">
                                <img src="http://www.visionair.fm/wp-content/uploads/cinema-popcorn-e-biglietti.jpg" />
                            </div>
                            <div className="user">
                                <img className="img-circle" src="https://s-media-cache-ak0.pinimg.com/736x/5a/74/32/5a74321807afcb94cb012d4610be92ee.jpg" />
                            </div>
                            <div className="content">
                                <div className="main">
                                    <h3 className="name">{this.props.item.Name}</h3>
                                </div>
                                <div className="footer">
                                    <i className="fa fa-mail-forward"></i>
                                </div>
                            </div>
                        </div>
                        <div className="back">
                            <div className="header">
                                <div className="cover">
									<img src="http://www.visionair.fm/wp-content/uploads/cinema-popcorn-e-biglietti.jpg" />
								</div>
                            </div>
                            <div className="content">
                                <div className="main">
								<br/>
                                    <h4 className="text-center">{this.props.item.Address}</h4>
                                    <p className="text-center">{this.props.item.TelephoneNr}</p>
                                </div>
                            </div>
                            <div className="footer">
                                <div className="social-links text-center">
                                    <a href="/Cinema/Index" className="cinema" onClick={this.handleClick}>see more</a>
                                </div>
                            </div>
                        </div> 
                    </div>
					</div>
					</div>
            );
        }
    });

    var CinemaGridTable = React.createClass({
        getInitialState: function(){
            return {
                items:[]
            }
        },
        componentDidMount:function(){
            $.get(this.props.dataUrl, function(models){
                if(this.isMounted()){
                    this.setState({
                        items: models
                    });
                }
            }.bind(this));
			window.initMap = this.initMap;
			
        },

        render : function(){
           var rows = [];
            this.state.items.forEach(function(item){
                rows.push(<CinemaGridRow item={item} />);
            });
           return (
			<div className="col-sm-10 col-sm-offset-1">
                    {rows}
					</div>
            );
        }
    });
   React.render(
        <CinemaGridTable dataUrl="/Home/GetCinemas" />,
        document.getElementById('content')
    );